<template>
	<div class="mapNodeContent">
		<div class="mapNodeContentLine">
			<div class="mapNodeTitle">情报板内容安全管理</div>
			<div class="mapBack" @click="mapBackClick">退出</div>
			<div class="mapNodeArea">
				<div class="mapNodeAreaLeft">
					<div class="devState">
						<div class="boxTitle">设备状态</div>
						<div class="devStateBox">
							<div id="devStateOnLine"></div>
							<div id="devStateOnNetwork"></div>
							<div id="devStateOnTrouble"></div>
						</div>
					</div>
					<div class="realtimeWaring">
						<div class="boxTitle">实时告警详情</div>
						<div class="realtimeWaringBox">
							<el-tooltip class="item" popper-class effect="dark" placement="right" v-for="(item, index) in waringArr" :key="index">
								<p slot="content">
									<span style="font-size: 16px; line-height: 36px">设备&nbsp;&nbsp;&nbsp;&nbsp;{{ item.terminalName }}</span
									><br />
									<span style="font-size: 16px; line-height: 36px">时间&nbsp;&nbsp;&nbsp;&nbsp;{{ item.warningTime }}</span
									><br />
									<span style="font-size: 16px; line-height: 36px">告警&nbsp;&nbsp;&nbsp;&nbsp;{{ item.content }}</span
									><br />
									<span style="font-size: 16px; line-height: 36px">类别&nbsp;&nbsp;&nbsp;&nbsp;{{ transitionType(item.type) }}</span>
								</p>
								<div>
									<span>
										<img src="../../assets/icon/waring.png" alt="" />
									</span>
									<span>设备&nbsp;&nbsp;{{ item.terminalName }}</span>
									<span>时间&nbsp;&nbsp;{{ item.warningTime }}</span>
									<span>告警&nbsp;&nbsp;{{ item.content }}</span>
								</div>
							</el-tooltip>
						</div>
					</div>
					<div class="safetyBulletin">
						<div class="safetyBulletinTitle">安全简报</div>
						<div class="safetyBulletinItem">
							<div class="itemleft">
								<div class="firstitem">
									<img src="../../assets/icon/item1.png" alt="" />
								</div>
							</div>
							<div class="itemmiddle">防护内容</div>
							<div class="itemright">{{ defend_content }}</div>
						</div>
						<div class="safetyBulletinItem">
							<div class="itemleft">
								<div class="seconditem">
									<img src="../../assets/icon/item2.png" alt="" />
								</div>
							</div>
							<div class="itemmiddle">发现敏感内容</div>
							<div class="itemright">{{ sensitivity_content }}</div>
						</div>
						<div class="safetyBulletinItem">
							<div class="itemleft">
								<div class="threeitem">
									<img src="../../assets/icon/item3.png" alt="" />
								</div>
							</div>
							<div class="itemmiddle">待处置工单</div>
							<div class="itemright">{{ workorder_content }}</div>
						</div>
					</div>
				</div>
				<div class="mapNodeAreaRight" id="mapNodeEchart"></div>
			</div>
		</div>
	</div>
</template>
<script>
import * as mapData from "@/assets/json/sichuang.json";
import {
	mapNode_count,
	realtime_all,
	mapNode_defend_content,
	mapNode_sensitivity_content,
	mapNode_workorder_content,
	terminal_baseInfo,
	mapNode_map_point,
	mapNode_map_waring_point,
} from "@/utils/request/api";
var trainLines = [
	[105.422214, 30.6623291],
	[105.42418472, 30.65554817],
	[105.41876536, 30.64495201],
	[105.41728736, 30.63986545],
	[105.42122876, 30.63477863],
	[105.42763353, 30.6292676],
	[105.43009692, 30.62163644],
	[105.44783316, 30.6072204],
	[105.45473059, 30.59577085],
	[105.46015, 30.58177515],
	[105.47394481, 30.56735324],
	[105.4793642, 30.55377774],
	[105.49857834, 30.54147332],
	[105.5168071, 30.5223772],
	[105.52764581, 30.5113422],
	[105.5335578, 30.49351381],
	[105.54439644, 30.4697376],
	[105.56163976, 30.45572392],
];
var trainLines1 = [
	[106.02952435, 30.85433984],
	[106.03525561, 30.84852501],
	[106.03707926, 30.84136782],
	[106.04307106, 30.83130213],
	[106.05114693, 30.81966939],
	[106.04515528, 30.81855078],
	[106.0433318, 30.81251009],
	[106.03681924, 30.80356023],
	[106.03317221, 30.79886124],
	[106.03056722, 30.79281933],
	[106.03030679, 30.78722464],
	[106.03056738, 30.78162969],
	[106.03239099, 30.77670582],
	[106.0326516, 30.76909572],
	[106.03213073, 30.7585749],
	[106.03186965, 30.75746528],
	[106.04489498, 30.75768914],
	[106.0508866, 30.76104703],
	[106.06052529, 30.76597172],
	[106.06912203, 30.76507634],
	[106.08214739, 30.76239015],
	[106.10038289, 30.75679368],
	[106.11002164, 30.75589822],
	[106.11913935, 30.76037546],
	[106.12903864, 30.74873421],
	[106.12955967, 30.74224137],
	[106.12929918, 30.73686767],
	[106.13216476, 30.73059798],
	[106.13164377, 30.7243278],
	[106.12955974, 30.71872916],
	[106.1316438, 30.71268228],
	[106.14024049, 30.70573911],
	[106.14571111, 30.69588344],
	[106.14623138, 30.69522265],
	[106.14857597, 30.69253448],
	[106.14805497, 30.6887261],
	[106.14831551, 30.68402144],
	[106.14909706, 30.67886845],
	[106.1496181, 30.67416332],
	[106.14857609, 30.66968203],
	[106.14753407, 30.66676908],
	[106.1511812, 30.66251154],
	[106.15665188, 30.65735737],
	[106.16082002, 30.65265121],
	[106.16238308, 30.64682423],
	[106.16082008, 30.63606581],
	[106.16160161, 30.63225526],
	[106.16342518, 30.62709957],
	[106.16316469, 30.62239197],
	[106.16108066, 30.61611482],
	[106.15743359, 30.61163089],
	[106.15482855, 30.60490469],
	[106.14727396, 30.58898403],
	[106.14883702, 30.58382609],
	[106.1519631, 30.5802378],
	[106.15222364, 30.57395797],
	[106.15743377, 30.56745344],
	[106.15743315, 30.56679942],
	[106.15847525, 30.5589483],
	[106.15847528, 30.55558334],
	[106.16498802, 30.55064787],
	[106.16941668, 30.54683392],
	[106.17202183, 30.53785935],
	[106.17983714, 30.52439597],
	[106.1907785, 30.51339953],
	[106.21214011, 30.50083067],
	[106.2189133, 30.49342328],
	[106.2267285, 30.48758676],
	[106.23193863, 30.47883134],
	[106.24053532, 30.47052429],
	[106.25590515, 30.4669318],
	[106.25981273, 30.46423735],
	[106.26189676, 30.45570443],
	[106.26528331, 30.45098856],
	[106.26528329, 30.44222992],
	[106.2658043, 30.44200533],
	[106.26554349, 30.44089104],
	[106.26893012, 30.43190665],
	[106.26971167, 30.42471855],
	[106.26840915, 30.41842855],
	[106.27127475, 30.41146414],
	[106.28065305, 30.39843267],
	[106.29003133, 30.38584894],
	[106.29706502, 30.37618536],
	[106.3004516, 30.37056656],
	[106.30149363, 30.36539699],
	[106.30774577, 30.35685538],
	[106.30722474, 30.3377465],
	[106.30644321, 30.33257523],
	[106.3116533, 30.31885884],
	[106.31295582, 30.31121282],
	[106.313216, 30.30987483],
	[106.31087145, 30.30200299],
	[106.30956892, 30.29503028],
	[106.30904794, 30.2840079],
	[106.30956898, 30.27523412],
	[106.31035052, 30.26533453],
	[106.30904801, 30.25835927],
	[106.308006, 30.25228364],
	[106.30878753, 30.2475579],
	[106.31009008, 30.24103152],
	[106.3100901, 30.23472978],
	[106.3093086, 30.22775239],
	[106.31009013, 30.22144992],
	[106.31139267, 30.21672273],
	[106.31035066, 30.21041938],
	[106.30722461, 30.20614194],
	[106.30488007, 30.20096373],
	[106.3051406, 30.19510979],
	[106.30201458, 30.18272534],
	[106.30149357, 30.18204978],
	[106.30149291, 30.1822718],
	[106.30149294, 30.1761914],
	[106.30435857, 30.17033586],
	[106.30774522, 30.16200238],
	[106.30826627, 30.15434398],
	[106.30956883, 30.14916297],
	[106.31399749, 30.14285523],
	[106.31477903, 30.13880009],
	[106.31399754, 30.13271706],
	[106.31321604, 30.12618302],
	[106.31269508, 30.11559249],
	[106.31061105, 30.11063486],
	[106.29966984, 30.09959194],
	[106.29940949, 30.07344473],
	[106.29289691, 30.06510324],
	[106.28117423, 30.05766296],
	[106.27205661, 30.05112408],
	[106.27127389, 30.0508995],
	[106.2634587, 30.04368348],
	[106.25955114, 30.03579026],
	[106.25564357, 30.03060302],
	[106.2504335, 30.02203222],
	[106.24730748, 30.01549086],
	[106.24027385, 30.00872349],
	[106.23688733, 30.00240687],
	[106.23688745, 29.99202871],
	[106.23636651, 29.98548541],
	[106.23871111, 29.98187513],
	[106.24678684, 29.97939299],
	[106.25408106, 29.97533118],
	[106.26137527, 29.97149487],
	[106.26840897, 29.96743274],
	[106.27804773, 29.96382182],
	[106.28742596, 29.96179062],
	[106.28794699, 29.95885667],
	[106.29966977, 29.95456833],
	[106.31009, 29.95524544],
	[106.32051022, 29.95750255],
	[106.33431703, 29.95795395],
	[106.34030867, 29.95682544],
	[106.3460398, 29.95343986],
	[106.35385496, 29.949377],
	[106.35828355, 29.94486253],
	[106.36766173, 29.93809045],
	[106.37808192, 29.93199519],
	[106.3879811, 29.92883454],
	[106.39110714, 29.92364184],
	[106.3916279, 29.92320056],
	[106.39527502, 29.91778163],
	[106.39449351, 29.90987851],
	[106.39475402, 29.90355557],
	[106.39788012, 29.90174895],
	[106.40647687, 29.89632887],
	[106.40986347, 29.89407043],
	[106.41272905, 29.88819812],
	[106.41246854, 29.88481016],
	[106.41611563, 29.88209971],
	[106.42106527, 29.87938918],
	[106.42757793, 29.87306435],
	[106.44190575, 29.85679869],
	[106.44034269, 29.85250593],
	[106.41403151, 29.82651959],
	[106.41012391, 29.807082],
	[106.4098628, 29.8066355],
	[106.40960233, 29.79985387],
	[106.41038388, 29.79533254],
	[106.4163756, 29.78922842],
	[106.42314882, 29.78651536],
	[106.45988044, 29.7679742],
	[106.46170399, 29.76277303],
	[106.45935943, 29.74965585],
	[106.45857792, 29.7374418],
	[106.45961995, 29.71957047],
	[106.4661326, 29.70056463],
	[106.4710822, 29.69060779],
	[106.47342673, 29.68110263],
	[106.47394774, 29.68064998],
	[106.47368687, 29.68020325],
	[106.4856703, 29.66843334],
	[106.48749388, 29.66254788],
	[106.48775441, 29.65688847],
	[106.49140154, 29.65009676],
	[106.49322511, 29.64398384],
	[106.49270413, 29.63583272],
	[106.49322518, 29.6260958],
	[106.49530925, 29.62043438],
	[106.49530927, 29.61590502],
	[106.49504879, 29.60888412],
	[106.48749412, 29.60526024],
	[106.48072098, 29.60186274],
	[106.47707393, 29.5950674],
	[106.47290588, 29.58827162],
	[106.47160339, 29.58283467],
	[106.46170422, 29.57649119],
	[106.45701517, 29.57014733],
	[106.45388917, 29.56244354],
	[106.452325, 29.5619904],
	[106.44841741, 29.55700513],
	[106.44659389, 29.55133964],
	[106.44424933, 29.54975316],
	[106.44346786, 29.54159363],
	[106.44320739, 29.53706051],
	[106.44320743, 29.53139405],
	[106.44424951, 29.52550048],
	[106.44346802, 29.52119351],
	[106.44112348, 29.51733976],
	[106.44112351, 29.51393927],
	[106.44008152, 29.5091784],
	[106.44060256, 29.50555092],
	[106.4408631, 29.50124312],
	[106.4434682, 29.49693514],
	[106.44763633, 29.492627],
	[106.44763636, 29.48854546],
	[106.45336758, 29.47652666],
	[106.45909874, 29.47199093],
	[106.47186357, 29.46428006],
	[106.47629219, 29.45747548],
	[106.48280484, 29.4545267],
	[106.49504859, 29.45429986],
	[106.50781335, 29.45407303],
	[106.51276296, 29.45339253],
	[106.51823356, 29.44409199],
	[106.52135962, 29.43842044],
	[106.52162013, 29.43864731],
	[106.52161942, 29.43821267],
	[106.52448505, 29.43185986],
	[106.5458468, 29.41347915],
	[106.55027545, 29.40667107],
	[106.5547041, 29.40145118],
	[106.56330085, 29.39645798],
	[106.57267911, 29.39237248],
	[106.58570447, 29.39032969],
	[106.59586424, 29.38919479],
	[106.59612474, 29.38510904],
	[106.59586423, 29.37943412],
	[106.5953432, 29.37307784],
	[106.59404066, 29.36604009],
	[106.58961205, 29.36149934],
	[106.58830951, 29.3521902],
	[106.58570445, 29.34492395],
	[106.5833599, 29.33970102],
	[106.57971282, 29.33356942],
	[106.57893131, 29.32834593],
	[106.57736828, 29.32266791],
	[106.57528424, 29.31585389],
	[106.57528425, 29.31221956],
	[106.57476256, 29.31224336],
	[106.57398106, 29.30111213],
	[106.57372057, 29.29543247],
	[106.57189702, 29.29134292],
	[106.57033398, 29.28725322],
	[106.5700735, 29.27975429],
	[106.57059452, 29.27657294],
	[106.57919129, 29.26225596],
	[106.57971231, 29.25771053],
	[106.57840979, 29.2504375],
	[106.58075436, 29.2445278],
	[106.58544348, 29.24134551],
	[106.58909057, 29.23611725],
	[106.58961159, 29.22997939],
	[106.5898721, 29.22247708],
	[106.58804856, 29.2113363],
	[106.58883009, 29.20565186],
	[106.58856958, 29.19905742],
	[106.58804858, 29.19337222],
	[106.58700656, 29.18836899],
	[106.58674606, 29.1845027],
];
var trainLines2 = [
	[104.14215817, 30.66868218],
	[104.1433314, 30.66805147],
	[104.14494459, 30.66729462],
	[104.14641112, 30.66716848],
	[104.14787765, 30.66704234],
	[104.15037074, 30.66742077],
	[104.15315714, 30.66792533],
	[104.15535693, 30.66805147],
	[104.15741006, 30.66830376],
	[104.16386277, 30.66956517],
	[104.16576925, 30.67006973],
	[104.16855565, 30.670322],
	[104.17119539, 30.67082656],
	[104.17603493, 30.67183566],
	[104.18219434, 30.67221407],
	[104.20580545, 30.6723402],
	[104.21577784, 30.67170952],
	[104.22340379, 30.67158338],
	[104.22970986, 30.6723402],
	[104.23425611, 30.67347542],
	[104.25185449, 30.67990808],
	[104.26138696, 30.68293507],
	[104.27854535, 30.68835648],
	[104.28822439, 30.69314872],
	[104.30186307, 30.69970614],
	[104.30684926, 30.70260641],
	[104.31315533, 30.70651534],
	[104.31711497, 30.70916323],
	[104.31931477, 30.71067628],
	[104.3232744, 30.71231539],
	[104.32591416, 30.71370231],
	[104.33441999, 30.71899802],
	[104.340726, 30.72517543],
	[104.34365903, 30.72857914],
	[104.34732532, 30.73198275],
	[104.34952511, 30.73261303],
	[104.36654334, 30.73667131],
	[104.38074963, 30.7389871],
	[104.39520088, 30.74088179],
	[104.40132429, 30.74109231],
	[104.40720276, 30.738145],
	[104.41112174, 30.73877657],
	[104.41479579, 30.7389871],
	[104.41895971, 30.73877657],
	[104.42214388, 30.73835555],
	[104.42655273, 30.7368819],
	[104.43071665, 30.7345661],
	[104.43512549, 30.73246075],
	[104.43904446, 30.72909209],
	[104.4400242, 30.72488117],
	[104.44002419, 30.72172288],
	[104.44002417, 30.71603758],
	[104.44075897, 30.71308952],
	[104.44320833, 30.71287894],
	[104.44418806, 30.71161564],
	[104.44663741, 30.70972038],
	[104.45594495, 30.70719332],
	[104.46157845, 30.7044557],
	[104.47113091, 30.70045427],
	[104.47309037, 30.69813757],
	[104.47358023, 30.69497323],
	[104.4738252, 30.69181384],
	[104.47456004, 30.68865435],
	[104.47480499, 30.68654797],
	[104.47823413, 30.68549476],
	[104.48754177, 30.68465218],
	[104.49268547, 30.68338831],
	[104.49782916, 30.68359895],
	[104.50003359, 30.68486283],
	[104.50321778, 30.68654797],
	[104.5066469, 30.68802244],
	[104.52183305, 30.68675852],
	[104.52526218, 30.68486259],
	[104.54069326, 30.68507323],
	[104.55636928, 30.68675837],
	[104.56420729, 30.68717964],
	[104.57326998, 30.68654773],
	[104.57743392, 30.68507323],
	[104.58257761, 30.68528387],
	[104.59702893, 30.68423065],
	[104.60339731, 30.68359871],
	[104.6183385, 30.68275612],
	[104.62372712, 30.6817028],
	[104.64577144, 30.67559362],
	[104.65164993, 30.67517229],
	[104.66463154, 30.66990553],
	[104.68202205, 30.66779875],
	[104.69157456, 30.66484911],
	[104.70480107, 30.6600032],
	[104.7114143, 30.65600088],
	[104.72047698, 30.65494735],
	[104.72488588, 30.6522081],
	[104.73345871, 30.64862589],
	[104.74031694, 30.64820445],
	[104.74570555, 30.64946878],
	[104.75427834, 30.65031165],
	[104.76211632, 30.65010094],
	[104.76921949, 30.6496795],
	[104.77607773, 30.64946878],
	[104.78220116, 30.647783],
	[104.78685496, 30.6469401],
	[104.79273345, 30.64672938],
	[104.79665244, 30.64588647],
	[104.80081637, 30.64314697],
	[104.80571511, 30.6404074],
	[104.81061384, 30.63956444],
	[104.81551258, 30.63977518],
	[104.84735436, 30.64272551],
	[104.85176322, 30.64335771],
	[104.86131576, 30.64356845],
	[104.87184805, 30.64441137],
	[104.87625691, 30.64441136],
	[104.88287018, 30.64188256],
	[104.88899358, 30.63956444],
	[104.89879104, 30.63893221],
	[104.90344482, 30.63703551],
	[104.9080986, 30.63534953],
	[104.91569162, 30.63408503],
	[104.92279474, 30.63134521],
	[104.93063266, 30.62797301],
	[104.93871563, 30.62460029],
	[104.94434921, 30.62249253],
	[104.94900303, 30.62059551],
	[104.96222964, 30.61827687],
	[104.96810815, 30.61574739],
	[104.97692588, 30.61448262],
	[104.98525373, 30.61427183],
	[104.99235691, 30.61195304],
	[104.99676578, 30.61005582],
	[105.00239932, 30.60921259],
	[105.00705312, 30.60858017],
	[105.01587082, 30.61026662],
	[105.0278727, 30.61300704],
	[105.03228155, 30.61490421],
	[105.03742522, 30.61616897],
	[105.04820243, 30.61490421],
	[105.05383597, 30.6153258],
	[105.06240875, 30.61722293],
	[105.0707366, 30.61785529],
	[105.08445306, 30.6193308],
	[105.09180117, 30.62186019],
	[105.09767966, 30.62375719],
	[105.10380308, 30.62396797],
	[105.11531512, 30.62502184],
	[105.12707211, 30.62649724],
	[105.13515504, 30.62839415],
	[105.17018094, 30.62164941],
	[105.1819379, 30.62122785],
	[105.19540935, 30.61637976],
	[105.2113302, 30.61448262],
	[105.22210737, 30.61237464],
	[105.23337434, 30.60668288],
	[105.24831536, 30.60162177],
	[105.26031721, 30.60436245],
	[105.26864509, 30.60246507],
	[105.27991215, 30.60415163],
	[105.28603558, 30.60394081],
	[105.29166913, 30.60288671],
	[105.30220137, 30.60710304],
	[105.3124887, 30.60900033],
	[105.32081654, 30.60984356],
	[105.34041149, 30.61068678],
	[105.34702477, 30.61448119],
	[105.35241338, 30.61490278],
	[105.35657731, 30.6140596],
	[105.3651501, 30.61553517],
	[105.37739696, 30.61448119],
	[105.38596977, 30.60921114],
	[105.39429762, 30.60457326],
	[105.40017611, 30.60120012],
	[105.40580965, 30.59951351],
	[105.41193306, 30.59761604],
	[105.4175666, 30.59550769],
	[105.42271025, 30.5919234],
	[105.435202, 30.58939324],
	[105.4459792, 30.58960409],
	[105.4540621, 30.59002579],
	[105.45945072, 30.59255594],
	[105.46336974, 30.59698354],
	[105.46606407, 30.60077847],
	[105.46826854, 30.60562734],
	[105.47071796, 30.6123732],
	[105.4726775, 30.6172215],
	[105.47463701, 30.61890781],
	[105.47855602, 30.62038331],
	[105.4829649, 30.62185878],
	[105.48786364, 30.621648],
	[105.4934972, 30.62122644],
	[105.50329469, 30.62185878],
	[105.50941818, 30.62628508],
	[105.51309227, 30.628182],
	[105.52068532, 30.62776047],
	[105.52582896, 30.62438812],
	[105.52999286, 30.62228034],
	[105.53489158, 30.62059409],
	[105.54199479, 30.6227019],
	[105.5498328, 30.62354511],
	[105.55448668, 30.62733902],
	[105.57817689, 30.63465104],
	[105.5858406, 30.63551114],
	[105.59250469, 30.63809139],
	[105.59650313, 30.64153161],
	[105.601168, 30.64267833],
	[105.61816146, 30.64525839],
	[105.62549196, 30.65156491],
	[105.62915721, 30.65471802],
	[105.63582132, 30.65729777],
	[105.64481786, 30.66732946],
	[105.65014915, 30.66962227],
	[105.6638106, 30.67048206],
	[105.67180755, 30.67707355],
	[105.68313656, 30.67736012],
	[105.695132, 30.68280491],
	[105.70179613, 30.68366459],
	[105.71479118, 30.68337803],
	[105.71878964, 30.68022584],
	[105.72312131, 30.67736012],
	[105.72845259, 30.67564065],
	[105.73544994, 30.67850642],
	[105.74078126, 30.68051241],
	[105.74811181, 30.68223179],
	[105.75610878, 30.68509737],
	[105.76710464, 30.68996894],
	[105.76877071, 30.69369388],
	[105.77143638, 30.69483998],
	[105.77776732, 30.69655912],
	[105.78243223, 30.69827822],
	[105.78776356, 30.69971078],
	[105.79342812, 30.70372185],
	[105.8020915, 30.70314885],
	[105.81208777, 30.70830573],
	[105.81541983, 30.70744626],
	[105.82175081, 30.71059758],
	[105.83607872, 30.71088423],
	[105.84307612, 30.71403543],
	[105.85007351, 30.7160407],
	[105.85640446, 30.71690008],
	[105.86306862, 30.71775946],
	[105.86740037, 30.720624],
	[105.87239852, 30.72262912],
	[105.8900584, 30.72604537],
	[105.8967225, 30.72690466],
	[105.90072097, 30.72461321],
	[105.90738508, 30.7217489],
	[105.91738124, 30.71859799],
	[105.92804379, 30.71945734],
	[105.93504109, 30.72117602],
	[105.94203839, 30.72031668],
	[105.95170134, 30.72346754],
	[105.97102724, 30.73034158],
	[105.97802455, 30.73234648],
	[105.98535508, 30.73521052],
	[105.99501804, 30.73664252],
	[105.99934972, 30.73922007],
	[106.00568065, 30.74408859],
	[106.01034553, 30.74552047],
	[106.01767608, 30.74895688],
	[106.02567304, 30.75239317],
	[106.03267038, 30.75525665],
	[106.03833491, 30.7581201],
	[106.05232959, 30.76155607],
	[106.05899375, 30.76613717],
	[106.10764173, 30.7561157],
	[106.1269678, 30.76441925],
	[106.15095866, 30.76527827],
	[106.15895561, 30.76499196],
	[106.16828535, 30.76298779],
	[106.17794832, 30.76270147],
	[106.19161807, 30.76468636],
	[106.20970902, 30.76881049],
	[106.22226192, 30.76785878],
	[106.25364417, 30.76817602],
	[106.26213583, 30.76722431],
	[106.27505792, 30.76658983],
	[106.28465721, 30.76817602],
	[106.29536408, 30.76658983],
	[106.30274814, 30.76722794],
	[106.31123983, 30.76532448],
	[106.32157753, 30.76659346],
	[106.32173834, 30.76676045],
];
export default {
	name: "MapNode2",
	data() {
		return {
			connected: 0,
			connected_: 0,
			fault: 0,
			fault_: 0,
			online: 0,
			online_: 0,
			sum: 0,
			waringTime: null,
			waringArr: [],
			defend_content: "",
			sensitivity_content: "",
			workorder_content: "",
			// 设备基础信息
			terminalBaseInfo: {
				name: "",
				ipAddress: "",
				groupName: "",
				coord: "",
				version: "",
				state: "",
				controllerState: "",
				vpnState: "",
				doorState: "",
				devPosture: "",
				devHumidity: "",
				devTemperature: "",
			},
			// 终端点数据
			mapPointArr: [],
		};
	},
	created() {},
	mounted() {
		this.getCount();
		this.getWaringData(1, 3);
		this.getBulletinData();
		this.getMapPoint();
		this.getMapPointWaring();
		setTimeout(() => {
			this.initMapEchart();
			this.initDevState_online();
			this.initDevState_onnetwork();
			this.initDevState_ontrouble();
		}, 200);
	},
	destroyed() {
		clearInterval(this.waringTime);
		this.waringTime = null;
	},
	methods: {
		// 返回
		mapBackClick() {
			console.log(JSON.parse(localStorage.getItem("menuArrData")));
			clearInterval(this.waringTime);
			this.waringTime = null;
			this.$router.push(
				{ path: this.menuDataGo(JSON.parse(localStorage.getItem("menuArrData"))) },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 当前角色要跳转的菜单（菜单数据第一个为true的菜单）
		menuDataGo(arr) {
			for (var i = 0; i < arr.length; i++) {
				if (arr[i].disable == true && arr[i].index != "/mapScreenSecond") {
					return arr[i].index;
				}
			}
		},
		// 获取环形图表数据
		getCount() {
			mapNode_count().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.connected = res.data.connected;
					this.connected_ = res.data.sum - res.data.connected;
					this.fault = res.data.fault;
					this.fault_ = res.data.sum - res.data.fault;
					this.online = res.data.online;
					this.online_ = res.data.sum - res.data.online;
					this.sum = res.data.sum;
				} else {
					this.$msg.error("获取设备状态失败！");
				}
			});
		},
		// 设备状态-上线中
		initDevState_online() {
			var chartDom = document.getElementById("devStateOnLine");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var colorList = ["#6BBADE", "transparent"];
				var option = {
					backgroundColor: "transparent",
					title: {
						text: "上线中",
						x: "36%",
						y: "80%",
						textStyle: {
							fontSize: 14,
							color: "#fff",
						},
					},
					tooltip: {
						trigger: "item",
						show: false,
					},
					series: [
						{
							type: "pie",
							center: ["50%", "40%"],
							radius: ["40%", "50%"],
							clockWise: true,
							avoidLabelOverlap: false,
							hoverOffset: 0,
							itemStyle: {
								normal: {
									color: function (params) {
										return colorList[params.dataIndex];
									},
								},
							},
							label: {
								normal: {
									formatter: () => {
										// var a = '999999999999'
										// return a.length > 4 ? a.substr(0, 4) + '...' : a;
										return this.online;
									},
									position: "center",
									show: true,
									textStyle: {
										fontSize: "18",
										color: "#fff",
									},
								},
							},
							labelLine: {
								normal: {
									length: 20,
									length2: 30,
									lineStyle: {
										width: 1,
									},
								},
							},
							data: [
								{
									name: "上线中", // 有颜色的
									value: this.online,
								},
								{
									name: "上线中", // 透明的
									value: this.online_,
								},
							],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 设备状态-已入网
		initDevState_onnetwork() {
			var chartDom = document.getElementById("devStateOnNetwork");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var colorList = ["#B7C05D", "transparent"];
				var option = {
					backgroundColor: "transparent",
					title: {
						text: "已入网",
						x: "36%",
						y: "80%",
						textStyle: {
							fontSize: 14,
							color: "#fff",
						},
					},
					tooltip: {
						trigger: "item",
						show: false,
					},
					series: [
						{
							type: "pie",
							center: ["50%", "40%"],
							radius: ["40%", "50%"],
							clockwise: true,
							avoidLabelOverlap: false,
							hoverOffset: 0,
							itemStyle: {
								normal: {
									color: function (params) {
										return colorList[params.dataIndex];
									},
								},
							},
							label: {
								normal: {
									formatter: () => {
										return this.connected;
									},
									position: "center",
									show: true,
									textStyle: {
										fontSize: "18",
										color: "#fff",
									},
								},
							},
							labelLine: {
								normal: {
									length: 20,
									length2: 30,
									lineStyle: {
										width: 1,
									},
								},
							},
							data: [
								{
									name: "已入网",
									value: this.connected,
								},
								{
									name: "已入网",
									value: this.connected_,
								},
							],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 设备状态-故障中
		initDevState_ontrouble() {
			var chartDom = document.getElementById("devStateOnTrouble");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var colorList = ["#5E79BF", "transparent"];
				var option = {
					backgroundColor: "transparent",
					title: {
						text: "故障中",
						x: "36%",
						y: "80%",
						textStyle: {
							fontSize: 14,
							color: "#fff",
						},
					},
					tooltip: {
						trigger: "item",
						show: false,
					},
					series: [
						{
							type: "pie",
							center: ["50%", "40%"],
							radius: ["40%", "50%"],
							clockwise: true,
							avoidLabelOverlap: false,
							hoverOffset: 0,
							itemStyle: {
								normal: {
									color: function (params) {
										return colorList[params.dataIndex];
									},
								},
							},
							label: {
								normal: {
									// formatter: function (params) {
									// 	return params.value;
									// },
									formatter: () => {
										return this.fault;
									},
									position: "center",
									show: true,
									textStyle: {
										fontSize: "18",
										color: "#fff",
									},
								},
							},
							labelLine: {
								normal: {
									length: 20,
									length2: 30,
									lineStyle: {
										width: 1,
									},
								},
							},
							data: [
								{
									name: "故障中",
									value: this.fault,
								},
								{
									name: "故障中",
									value: this.fault_,
								},
							],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 获取告警数据
		getWaringData(page, size) {
			// 先执行一次
			realtime_all({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.waringArr = res.data.result;
				} else {
					this.$msg.error("实时告警获取失败！");
				}
			});
			// 定时执行
			if (this.waringTime == null) {
				this.waringTime = setInterval(() => {
					realtime_all({
						page: page,
						size: size,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.waringArr = res.data.result;
						} else {
							this.$msg.error("实时告警获取失败！");
						}
					});
				}, 60000);
			} else {
				clearInterval(this.waringTime);
			}
		},
		// 安全简报数据
		getBulletinData() {
			mapNode_defend_content().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.defend_content = res.data;
				} else {
					this.$msg.error("防护内容获取失败！");
				}
			});
			mapNode_sensitivity_content().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.sensitivity_content = res.data;
				} else {
					this.$msg.error("发现敏感内容获取失败！");
				}
			});
			mapNode_workorder_content().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.workorder_content = res.data;
				} else {
					this.$msg.error("待处置工单获取失败！");
				}
			});
		},
		// 地图
		initMapEchart() {
			this.$echarts.registerMap("sichuang", mapData);
			var chartDom = document.getElementById("mapNodeEchart");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				// var points = [
				// 	{
				// 		id: 14,
				// 		value: [105.422214, 30.6623291],
				// 		itemStyle: {
				// 			color: "#f00",
				// 		},
				// 		symbolSize: 12,
				// 	},
				// 	{
				// 		id: 15,
				// 		value: [106.02952435, 30.85433984],
				// 		itemStyle: {
				// 			color: "#0f0",
				// 		},
				// 		symbolSize: 12,
				// 	},
				// 	{
				// 		id: 16,
				// 		value: [105.56163976, 30.45572392],
				// 		itemStyle: {
				// 			color: "#808080",
				// 		},
				// 		symbolSize: 12,
				// 	},
				// ];
				var points = this.mapPointArr;
				console.log(points);
				var option = {
					backgroundColor: "transparent",
					grid: {
						top: "15%",
						right: "3%",
						left: "3%",
						bottom: "15%",
					},
					tooltip: {
						triggerOn: "mousemove|click",
						// trigger: "item",
						renderMode: "html",
						formatter: (params) => {
							console.log(params.data);
							this.getTerminalBaseInfo(params.data.id); // 渲染异步问题（解决方案，在终端点数据中添加终端基本信息数据并定时请求）
							console.log(this.terminalBaseInfo);
							console.log(params);
							var htmlStr = `<div
												style="
													width:480px;
													padding: 8px 12px;
												"
											>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备名称&nbsp;&nbsp;${this.terminalBaseInfo.name}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备IP&nbsp;&nbsp;${this.terminalBaseInfo.ipAddress}</span
												>
												<br />
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备分组&nbsp;&nbsp;${this.terminalBaseInfo.groupName}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>位置信息&nbsp;&nbsp;${this.terminalBaseInfo.coord}</span
												>
												<br />
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>固件版本&nbsp;&nbsp;${this.terminalBaseInfo.version}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>vpn链路状态&nbsp;&nbsp;${this.terminalBaseInfo.vpnState}</span
												>
												<br />
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>控制器状态&nbsp;&nbsp;${this.terminalBaseInfo.controllerState}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>箱门状态&nbsp;&nbsp;${this.terminalBaseInfo.doorState}</span
												>
												<br />
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>终端状态&nbsp;&nbsp;${this.terminalBaseInfo.state}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备姿态&nbsp;&nbsp;${this.terminalBaseInfo.devPosture}</span
												>
												<br />
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备湿度&nbsp;&nbsp;${this.terminalBaseInfo.devHumidity}</span
												>
												<span style="display:inline-block; width:50%; line-height: 48px; text-align: left; color: #fff";font-size: 14px;
													>设备温度&nbsp;&nbsp;${this.terminalBaseInfo.devTemperature}</span
												>
											</div>`;
							if (this.terminalBaseInfo.name != "" && params.data.id) {
								return htmlStr;
							}
						},
						extraCssText: "padding:8px 12px;border:none;border-radius:8px;background: #061a4c;", //提示框最外层div设置
					},
					visualMap: {
						show: true,
						x: "right",
						y: "top",
						seriesIndex: [0],
						min: 0,
						max: 1000,
						itemSymbol: "circle",
						type: "piecewise",
						pieces: [
							{
								value: 1,
								label: "正常",
								color: "#0f0",
							},
							{
								value: 2,
								label: "离线",
								color: "#BEBEBE",
							},
							{
								value: 3,
								label: "告警",
								color: "#f00",
							},
						],
						textStyle: {
							color: "#fff",
						},
						visibility: "off",
					},
					geo: {
						map: "sichuang",
						//视角缩放比例
						zoom: 1,
						//显示文本样式
						label: {
							normal: {
								// 默认地图文字字号和字体颜色
								show: true,
								textStyle: {
									color: "rgba(255,255,255,1)",
								},
							},
							emphasis: {
								// 选中地图文字字号和字体颜色
								show: true,
								textStyle: {
									color: "#fff", //滑过文字颜色
								},
							},
						},
						layoutSize: "100%",
						layoutCenter: ["55%", "50%"],
						mapLocation: {
							width: "110%",
							height: "97%",
						},
						//鼠标缩放和平移
						roam: true,
						itemStyle: {
							normal: {
								borderColor: "rgba(147, 235, 248, 1)",
								borderWidth: 1,
								areaColor: {
									type: "radial",
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [
										{
											offset: 0,
											color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
										},
										{
											offset: 1,
											color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
										},
									],
									globalCoord: false, // 缺省为 false
								},
								shadowColor: "rgba(128, 217, 248, 1)",
								// shadowColor: 'rgba(255, 255, 255, 1)',
								shadowOffsetX: -2,
								shadowOffsetY: 2,
								shadowBlur: 10,
							},
							emphasis: {
								// itemStyle: {
								areaColor: "#06B3A9",
								borderColor: "#404a59",
								borderWidth: 1,
								// },
							},
						},
					},
					series: [
						{
							type: "effectScatter",
							coordinateSystem: "geo",
							data: points,
							showEffectOn: "render",
							hoverAnimation: true,
							rippleEffect: {
								period: 2,
								scale: 5,
								brushType: "stroke",
							},
						},
						{
							type: "lines", //第一条实线
							coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
							polyline: true, // 这表示连线是否为多端点的连线
							data: [
								{
									coords: trainLines,
								},
							],
							lineStyle: {
								color: "#F77904",
								width: 5,
							},
							progressiveThreshold: 300,
							progressive: 100,
						},
						{
							type: "lines", //第二条实线
							coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
							polyline: true, // 这表示连线是否为多端点的连线
							data: [
								{
									coords: trainLines1,
								},
							],
							lineStyle: {
								color: "#F77904",
								width: 5,
							},
							progressiveThreshold: 300,
							progressive: 100,
						},
						{
							type: "lines", //第三条实线
							coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
							polyline: true, // 这表示连线是否为多端点的连线
							data: [
								{
									coords: trainLines2,
								},
							],
							lineStyle: {
								color: "#F77904",
								width: 5,
							},
							progressiveThreshold: 300,
							progressive: 100,
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 获取设备数据——基本信息
		getTerminalBaseInfo(id) {
			terminal_baseInfo({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.terminalBaseInfo = {
						name: res.data.name,
						ipAddress: res.data.ipAddress,
						groupName: res.data.groupName,
						coord: res.data.coord,
						version: res.data.version,
						state: res.data.status == 0 ? "在线" : "离线",
						controllerState: "在线",
						vpnState: "在线",
						doorState: res.data.doorStatus,
						devPosture: res.data.angleStatus,
						devHumidity: res.data.rh != null ? res.data.rh + "% / " + res.data.rhStatus : "",
						devTemperature: res.data.tempture != null ? res.data.tempture + "°C / " + res.data.temptureStatus : "",
					};
				} else {
					this.$msg.error("获取终端基本信息失败！");
				}
			});
		},
		// 详情中type转文字
		transitionType(value) {
			var text = "";
			if (value == 1) {
				text = "内容";
			} else if (value == 2) {
				text = "运维";
			} else if (value == 3) {
				text = "监控";
			}
			return text;
		},
		// 获取地图终端点坐标（离线（故障中）和正常（已入网））
		getMapPoint() {
			mapNode_map_point().then((res) => {
				console.log(res);
				res.data.forEach((item) => {
					console.log(item);
					var obj = {};
					// 离线（故障中）和正常（已入网）
					if (item.type == 0 && item.status == 0) {
						// 正常
						obj.id = item.id;
						obj.value = [Number(item.coord.split(",")[0]), Number(item.coord.split(",")[1])];
						(obj.itemStyle = {
							color: "#BEBEBE",
						}),
							(obj.symbolSize = 12);
					} else if (item.type == 0 && item.status == 1) {
						obj.id = item.id;
						obj.value = [Number(item.coord.split(",")[0]), Number(item.coord.split(",")[1])];
						(obj.itemStyle = {
							color: "#0f0",
						}),
							(obj.symbolSize = 12);
					}
					this.mapPointArr.push(obj);
				});
			});
		},
		// 获取地图终端点坐标（告警）
		getMapPointWaring() {
			mapNode_map_waring_point().then((res) => {
				console.log(res);
				res.data.forEach((item) => {
					console.log(item);
					var obj = {};
					// 告警（查询告警表当天的数据）
					obj.id = item.terminalId;
					obj.value = [Number(item.coord.split(",")[0]), Number(item.coord.split(",")[1])];
					(obj.itemStyle = {
						color: "#f00",
					}),
						(obj.symbolSize = 12);
					this.mapPointArr.push(obj);
				});
			});
		},
	},
};
</script>
<style lang="less" scoped>
.mapNodeContent {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/icon/backgroundColor.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	.mapNodeContentLine {
		width: 100%;
		height: 100%;
		background-image: url("../../assets/icon/backgroundLine.png");
		background-size: 98% auto;
		background-position: center 0;
		background-repeat: no-repeat;
		position: relative;
		.mapNodeTitle {
			width: 100%;
			height: 10%;
			font-size: 38px;
			color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.mapBack {
			font-size: 16px;
			color: #fff;
			/*
			padding: 8px 18px;
			background-color: rgba(20, 141, 179, 1);
			border-radius: 6px;
			*/
			position: absolute;
			top: 46px;
			right: 28px;
		}
		.mapBack:hover {
			cursor: pointer;
		}
		.mapNodeArea {
			width: 100%;
			height: 90%;
			padding: 0 18px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.mapNodeAreaLeft {
				width: 28%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				.boxTitle {
					width: 100%;
					height: 52px;
					font-size: 20px;
					font-weight: 600;
					color: #7594a8;
					background-image: url("../../assets/icon/navTitle.png");
					background-size: 100% auto;
					background-position: left bottom;
					background-repeat: no-repeat;
				}
				.devState {
					width: 90%;
					height: 24%;
					.devStateBox {
						width: 100%;
						height: calc(100% - 52px);
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						div {
							width: 33.33%;
							height: 100%;
						}
					}
				}
				.realtimeWaring {
					width: 90%;
					height: 42%;
					box-sizing: border-box;
					margin: 18px 0;
					.realtimeWaringBox {
						width: 100%;
						height: calc(100% - 52px - 18px);
						margin: 18px 0 0;
						div {
							width: 100%;
							height: 33.33%;
							box-sizing: border-box;
							padding: 8px 12px;
							position: relative;
							span {
								display: inline-block;
								color: #eaeef1;
								width: 190px;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							span:nth-child(1) {
								width: 24px;
								height: 24px;
								position: absolute;
								top: 8px;
								left: 10px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							span:nth-child(2) {
								position: absolute;
								top: 12px;
								left: 45px;
							}
							span:nth-child(3) {
								position: absolute;
								top: 12px;
								right: 12px;
							}
							span:nth-child(4) {
								position: absolute;
								top: 45px;
								left: 45px;
							}
						}
						div:hover {
							cursor: pointer;
						}
						div:first-child,
						div:last-child {
							background: #3f617c;
						}
						div:nth-child(2) {
							background: #0e3053;
						}
					}
				}
				.safetyBulletin {
					width: 90%;
					height: 34%;
					margin-bottom: 18px;
					background-image: url("../../assets/icon/safetyBulletin.png");
					background-size: 100% 100%;
					background-position: -8px 0;
					background-repeat: no-repeat;
					div {
						width: 96%;
						height: 24%;
					}
					.safetyBulletinTitle {
						font-size: 18px;
						color: #46c2f1;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: flex-end;
					}
					.safetyBulletinItem {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						.itemleft {
							width: 30%;
							height: 100%;
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							align-items: center;
							div {
								width: 48px;
								height: 48px;
								margin: 0 12px;
								border-radius: 50%;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								img {
									width: 24px;
									height: 24px;
								}
							}
							div.firstitem {
								background: #e08e40;
							}
							div.seconditem {
								background: #00d7c4;
							}
							div.threeitem {
								background: #088bec;
							}
						}
						.itemmiddle {
							width: 40%;
							height: 100%;
							font-size: 18px;
							color: #46c2f1;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
						}
						.itemright {
							width: 30%;
							height: 100%;
							font-size: 24px;
							color: #46c2f1;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
						}
					}
				}
			}
			.mapNodeAreaRight {
				width: 72%;
				height: 100%;
			}
		}
	}
}
</style>
